import React, { Component } from 'react';
import ReactDom from 'react-dom';
import {Button,Dialog,Form,Input} from 'element-react';
import IData from './personMsgData.js';

export class Call extends Component {
    constructor(props) {
        super(props);

        this.state = {
            form: {
                call: IData.officePhone
            },
            rules: {
                call: [
                    { required: true, message: '请输入电话号码', trigger: 'blur' },
                    { validator: (rule, value, callback) => {
                        if (value.length >'19'||isNaN(value)) {
                            callback(new Error('请输入正确的电话号码'));
                        } else {
                            callback();
                        }
                    }
                    }
                ]},
            value1:  IData.officePhone,
            dialogVisible: false,

        };
    }
    onCallChange(value) {
        this.setState({
            form: Object.assign({}, this.state.form, { call: value}),
        });
    }
    enter(event){
        event=event||window.event;
        if(event.keyCode=='13'){
            this.changeValue();
        }
    }
    changeValue(){
        this.setState({ dialogVisible: false });
        this.refs.form.validate((valid) => {
            if (valid) {
                let value1=this.state.form.call;
                this.setState({
                    value1
                })
            }
            else {
                this.setState({
                    value1:"1382344"
                })
            }
        });
    }

    render() {
        return (
            <div className="zy1">

                <Button type="text"className="font" onClick={ () => this.setState({ dialogVisible: true }) }>
                    <span>{this.state.value1}</span>&nbsp;&nbsp;&nbsp;<i className="el-icon-arrow-right el-icon-edit"></i></Button>
                <Dialog
                    title="电话"
                    size="middle"
                    visible={ this.state.dialogVisible }
                    onCancel={ () => this.setState({ dialogVisible: false }) }
                >
                    <Dialog.Body>
                        <Form ref="form" model={this.state.form} rules={this.state.rules} labelWidth="100">
                            <Form.Item prop="call" label="电话">
                                <Input value={this.state.form.call} onChange={this.onCallChange.bind(this)} onKeyDown={this.enter.bind(this)}></Input>
                            </Form.Item>
                        </Form>
                    </Dialog.Body>
                    <Dialog.Footer className="dialog-footer">
                        <Button type="primary" onClick={this.changeValue.bind(this) }>保存</Button>
                    </Dialog.Footer>
                </Dialog>
            </div>

        )
    }
}